<template>
  <div class="app-container">
  <el-row>
    <el-col :span="17" class="card-box">
      <el-card>
        <video
          ref="videoElement"
          :src="videoUrl"
          id="videoElement"
          controls
          muted
          style="width: 100%; height: 100%; object-fit: fill"
        ></video>
        
      </el-card>
    </el-col>
    <el-col :span="7" class="card-box">
      <el-card>
        <div class="app-container">
          <el-table v-loading="loading" :data="sourceList" >
            <el-table-column label="设备名称" align="center"  prop="sourceName"   />
            <el-table-column label="识别类型" align="center" prop="identifyType"  >
            </el-table-column>
            <el-table-column label="启用标识" align="center" prop="enable" >
                <template slot-scope="scope">
                  {{ dict.type.edge_device_enable.filter(item => item.value == scope.row.enable)[0].label }}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width"  >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handlePreview(scope.row)"
                >预览</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"/>
        </div>
      </el-card>
    </el-col>
  </el-row>
</div>   
</template>
<script>
import {listOnline} from "@/api/disposition/player";
import { listDevice, getDevice, delDevice, addDevice, updateDevice } from "@/api/disposition/device"
import hlsjs from "hls.js";
export default {
name: "About",
dicts:['edge_device_enable'],
components: {},
data() {
  return {
    // 遮罩层
    loading: true,
    // 选中数组
    ids: [],
    // 非单个禁用
    single: true,
    // 非多个禁用
    multiple: true,
    // 显示搜索条件
    showSearch: true,
    // 总条数
    total: 0,
    // 设备表格数据
    sourceList: [],
    // 弹出层标题
    title: "",
    // 是否显示弹出层
    open: false,
    //预览弹出层
    openPreview:false,
    // 查询参数
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      terminalId: null,
      sourceId: null,
      sourceName: null,
      enable: null,
      streamUrl: null,
      type: null,
      interal: null,
      infer0Type: null,
      infer0Scorethreshold: null,
      infer0Nmsthreshold: null,
      infer1Type: null,
      infer1Scorethreshold: null,
      infer1Nmsthreshold: null,
      sinktype: null,
      sinkCode: null,
      lon: null,
      lat: null,
      altitude: null,
      configValue: null,
      time: null
    },
    // 表单参数
    form: {},
    // 表单校验
    rules: {
    },
    //视频流地址
    videoUrl: "",//这里书写路径，例
  };
},
mounted() {
  this.getList();
  //获取edge_device_enable字典数据
     this.getDicts("edge_device_enable").then((res)=>{
      this.edgeDeviceEnable = res.data;
    });
},
methods: {
   /** 查询设备列表 */
  getList() {
    this.loading = true;
    listDevice(this.queryParams).then(response => {
      this.sourceList = response.rows;
      this.total = response.total;
      this.loading = false;
    });
  },
  /** 预览按钮操作 */
  handlePreview(row){
    this.videoUrl=row.ingestType
    // this.videoUrl = "rtsp://admin:qly123456@192.168.1.69"
    console.log(this.videoUrl)
    setTimeout(() => {this.show();}, 50);
    
  },
  getLabel(list, id, value, label) {
      if (id != '' && Array.isArray(list) && list.length != 0){
        return !list.find(item => item[value] == id) ? id : list.find(item => item[value] == id)[label]
      } else {
        return id
      }
  },
  //播放
  show() {
    this.video = this.$refs.videoElement; //定义挂载点
    console.log(this.video);
    if (hlsjs.isSupported()) {
      this.hlsjs = new hlsjs();
      this.hlsjs.loadSource(this.videoUrl);//设置播放路径
      this.hlsjs.attachMedia(this.video);//解析到video标签上
      console.log(this.hlsjs);
      this.hlsjs.on(hlsjs.Events.MANIFEST_PARSED, () => {
        this.video.play();
        console.log("加载成功");
      });
      this.hlsjs.on(hlsjs.Events.ERROR, (event, data) => {
        // 监听出错事件
        console.log("加载失败");
      });
    } else {
      this.$message.error("不支持的格式");
      return;
    }
  },
  //停止播放
  closeVideo() {
    if (this.hlsjs) {
      this.$refs.videoElement.pause();
      this.video.pause();
      this.hlsjs.destroy();
      this.hlsjs = null;
      this.$emit("closeVideo");
    }
  },
},
computed: {},
watch: {},
filters: {},

};
</script>